<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>权限管理</title>
    <style>
            #hide{
                height:270px!important;
            }
            .small{
                width: 120px;
            }
            .small input{
                width: 120px!important;
            }
        </style>
    <link rel="stylesheet" href="../../css/system/system.css">
    <link rel="stylesheet" href="../../css/public/base.css">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script src="../../js/public/jquery-3.3.1.js"></script>
</head>
<body>
    <div class="main">
       <div class="left">
           <ul>
               <li><i></i><a href="./manage.html">管理员</a></li>
               <li><i></i><a href="./userGroup.html">用户组</a></li>
               <li class="active"><i></i><a href="./jurisdiction.html">权限管理</a></li>
               <li><i></i><a href="./backMenu.html">后台菜单</a></li>
           </ul>
       </div>
       <div class="right">
            <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
               <button class="addManage" data-method="notice" data-type="auto">添加权限</button>
            </div>
           <div class="layui-form rl-table">
                <table class="layui-table" ay-skin="nob" id='table3' lay-filter="table3">
                        <!-- <thead>
                           <tr>
                             <th><input type="checkbox" lay-skin="primary" lay-filter="allChoose"></th>
                             <th>ID</th>
                             <th>权限名</th>
                             <th>权限分组</th>
                             <th>操作选项</th>
                             <th style="width:150px;">操作</th>
                           </tr> 
                        </thead>
                        <tbody>
                            <tr>
                              <td><input type="checkbox" name="" lay-skin="primary"></td>
                              <td>01</td>
                              <td>会员列表</td>
                              <td>会员</td>
                              <td>User@index.User@edit</td>
                              <td>
                                  <a href="#" class="edit">编辑</a>
                                  <a href="#" class="del">删除</a>
                              </td>
                            </tr>

                    
                        </tbody> -->
                   </table>
                   <!-- <div id="demo3"></div> -->
           </div>
       </div>
    </div>
    <div id="hide">
       <div class="hideContent layui-form">
            <div class="layui-form-item">
                    <label class="layui-form-label">所属分类</label>
                    <div class="layui-input-block">
                      <select name="city" lay-verify="required">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                      </select>
                    </div>
            </div>
            <div class="layui-form-item">
                    <label class="layui-form-label">权限名称</label>
                    <div class="layui-input-block">
                      <input type="text" name="title" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>  
            </div>
            <div class="layui-form-item">
                    <label class="layui-form-label " style="margin-left: -12px;">权限码</label>
                    <div class="layui-input-block small" style="margin-right:-12px;">
                            <select name="city" lay-verify="required">
                              <option value=""></option>
                              <option value="0">北京</option>
                              <option value="1">上海</option>
                              <option value="2">广州</option>
                            </select>
                    </div>
                    <div class="layui-input-block small">
                            <select name="city" lay-verify="required">
                              <option value=""></option>
                              <option value="0">北京</option>
                              <option value="1">上海</option>
                              <option value="2">广州</option>
                            </select>
                    </div>
            </div>
            <div class="layui-form-item">
                    <label class="layui-form-label"> </label>
                    <div class="layui-input-block">
                            <select name="city" lay-verify="required">
                              <option value=""></option>
                              <option value="0">北京</option>
                              <option value="1">上海</option>
                              <option value="2">广州</option>
                            </select>
                    </div>
            </div>
       </div>
    </div>
</body>
<script src="../../layui/layui.js"></script>
<script src="../../js/system/system.js"></script>
<script type="text/html" id="barDemo">
    <a href="#" class="edit">编辑</a>
    <a href="#" class="del" lay-event="del">删除</a>
  </script>
<script>
     $("#nav").load("../public/nav.html")
     //组件
     layui.use('table', function(){
  var table = layui.table;
  table.render({
      elem: '#table3'
    ,page: true //开启分页
    ,cols: [[ //表头
      {type: 'checkbox',width:80,unresize: true}
      ,{field: 'id', title: 'ID', width:80,unresize: true}
      ,{field: 'jurName', title: '权限名', width:235,unresize: true}
      ,{field: 'jurGroup', title: '权限分组', width:258,unresize: true}
      ,{field: 'select', title: '操作选项', width:430,unresize: true,} 
      ,{field: 'options', title: '操作', width: 130,toolbar: '#barDemo',unresize: true,fixed:'right'}
    ]],
    data:[{
      "id": "01"
        , "jurName": '会员列表'
        , "jurGroup": '会员'
        , "select":'User@index.User@edit'
    }]
    })
      //表格操作弹窗
table.on('tool(table3)', function (obj){
    var data = obj.data;
    if (obj.event === 'del'){
        layer.open({
                        type: 1,
                        title: '信息',
                        closeBtn: 1,
                        area: ['300px', '200px'],
                        shade: 0,
                        id: 'delSure', //设定一个id，防止重复弹出
                        btn: ['确认','取消'],
                        btnAlign: 'r',
                        content:'确认删除行吗？',
                    });
    }
  })
});
layui.use(['laypage', 'layer'], function () {
      var laypage = layui.laypage
         $ = layui.jquery, //弹框
        layer = layui.layer;
      laypage.render({
        elem: 'demo3'
        , prev: '<em><</em>'
        , next: '<em>></em>'
        , count: 100
        , layout: ['limit', 'skip', 'prev', 'page', 'next']
        , jump: function (obj) {
          console.log(obj)
        }
      });
    })
    //弹窗
    $('.addManage').click(function(){
        console.log('1111')
        layer.open({
                        type: 1,
                        title: '新增权限',
                        closeBtn: 1,
                        area: '710px;',
                        shade: 0,
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['提交','重置'],
                        btnAlign: 'c',
                        moveType: 1, //拖拽模式，0或者1
                        content:$('#hide'),
                        success: function (layero) {
                            // var btn = layero.find('.layui-layer-btn');
                            // btn.find('.layui-layer-btn0').attr({
                            //     href: '#',
                            //     target: '_blank'
                            // });
                        }
                    });
    })

</script>
</html>